<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #parent {
        width: 800px;
        height: 15px;
        background: #ccc;
        position: relative;
        margin: 100px auto;
    }
    #x{
        background: red;
        position: absolute;
        height: 15px;
        width: 15px;
    }
    #div2{
    	width: 0;
    	height: 0;
    	background: green;
    }
    </style>
    <script type="text/javascript">
    //鼠标按下
    //鼠标抬起
    //鼠标移动
    window.onload = function() {
        //console.log(window.screen.availWidth);
        var oParent = document.getElementById('parent');
        var oX = document.getElementById('x');
        var oDiv2 = document.getElementById('div2');
        var disX = 0;
        var disY = 0;
        //alert(oX);

        oX.onmousedown = function(ev) {
            var oEvent = ev || event;
            //pos=getpos(oEvent);
            //鼠标的位置减去DIV的位置

            if (oX.setCapture) {
                disX = oEvent.clientX - oX.offsetLeft;
                oX.onmousemove = mouseMove;
                oX.onmouseup = mouseUp
                //在IE7下使用事件捕获，确保所有的事件都指向DIV
                oX.setCapture();
                return false;
            } else {
                disX = oEvent.clientX - oX.offsetLeft;
                document.onmousemove = mouseMove;
                document.onmouseup = mouseUp
                return false;
            };
        };


               function mouseMove(ev) {

                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX;
                     
                     var r=oParent.offsetWidth - oX.offsetWidth;

                     if(l<0) l=0;
                     if(l>r) l=r;

                    oX.style.left = l + 'px';
                    
                    //console.log(l/(oParent.offsetWidth - oX.offsetWidth));
                    var scale=l/(oParent.offsetWidth - oX.offsetWidth);
                    
                       oDiv2.style.height=400*scale+'px';
                       oDiv2.style.width=400*scale+'px';
 

                };

                function mouseUp() {
                    this.onmousemove = null;
                    this.onmouseup = null;
                     
                    //在使用了事件捕获之后，在鼠标抬起的时候。需要释放这个事件捕获，不然的话，无法进行任何操作
                    if (oX.releaseCapture) {
                       oX.releaseCapture();
                    };
                };



    };
    </script>
</head>

<body>
    <div id="parent">
    	<div id="x"></div>
    </div>
    <div id="div2"></div>
</body>

</html>